<style>
	.w-85{width: 85px;}
	.f-r{float: right;}
	.section-order{position: relative;padding: 30px 48px;margin-bottom: 30px;margin-top: 45px;background-color: #fff;color: #424242;}
	.section {padding-left: 183px;}
	.order-icon {width: 80px;height: 80px;line-height: 80px;position: absolute;top: 40px;left: 50px;font-size: 80px;color: #83c44e;  text-align: center;  border: 2px solid #83c44e;  border-radius: 42px;  overflow: hidden;  }
	.order-info .title{    margin-bottom: 10px; font-size: 24px; font-weight: normal; line-height: 36px;}
	.order-info .order-time{margin-bottom: 5px; color: #616161;line-height: 2;}
	.order-info .order-time-detail{margin: 0 5px; color: #ff6700;}
	.order-info .post-info{color: #616161;-webkit-transition: height .3s ease;transition: height .3s ease;}
	.order-info .total{margin-bottom: 10px;color: #757575;}
	.order-info .money{color: #ff6700; font-size: 14px;}
	.money em {font-style: normal;font-size: 24px;}
	.order-info a{color: #757575;text-decoration: none;}
	.clearfix:after { clear: both; }
	.clearfix:before, .clearfix:after {content: " "; display: table;}
	.section .fl{float: left;}
	.section .fr {float: right;text-align: right;}
	.order-detail{display: none;margin-top: 10px;padding-top: 20px;border-top: 1px solid #e0e0e0;}
	.order-detail li {line-height: 24px;margin-bottom: 8px;color: #333;}
	.order-detail .order-num{color: #ff6700; font-style: normal;}
	/**支付**/
	.order-pay {margin-top: 45px; padding: 30px 48px; margin-bottom: 30px; background-color: #fff; color: #424242;}
	.order-pay .cash-title{height: 50px;margin-bottom: 30px;border-bottom: 1px solid #e0e0e0;font-size: 18px;}
	@media (max-width: 1000px) {
		.section-order{margin-top: 0;}
		.order-icon{display: none;}
		.section{padding: 25px}
	}
</style>
<div class="container">
	<div id="order-info-box" class="section section-order">
		<div class="order-info clearfix">
			<div class="fl">
				<h2 class="title">订单提交成功!去付款吧~</h2>
				<p class="order-time">我们将尽快为你发货</p>
				<p class="order-time">请在 <span class="order-time-detail">1小时5分</span>内完成支付，超时后会将取消订单</p>
				<span id="username"></span>
				<p id="address-info" class="post-info" style="display: inline-block;">收货信息</p>
			</div>
			<div class="fr">
				<p class="total">应付总额：<span class="money"><em id="money">0</em>元</span></p>
				<a href="javascript:void (0)" id="order-detail-btn" style="font-size: 12px">订单详情</a>
			</div>
		</div>
		<i class="i i-goods_new_fill_light order-icon"></i>
		<div class="order-detail">
			<ul>
				<li class="clearfix">
					<span class="fl w-85">订单号：</span>
					<div class="fl"><em id="order-num" class="order-num">0</em></div>
				</li>
				<li class="clearfix">
					<span class="fl w-85">收货信息:</span>
					<div class="fl" id="address-detail"></div>
				</li>
				<li class="clearfix">
					<span class="fl w-85">商品名称</span>
					<div class="fl" id="shop-name"></div>
				</li>
			</ul>
		</div>
	</div>
	<div class="order-pay">
		<div class="cash-title">
			请选择付款方式
		</div>
		<div class='weui-cells'>
			<!--<div class='weui-cell weui-cell_access'>-->
				<!--<div class='weui-cell__bd' ><i class='i i-payfill'></i> 电子钱包<span style="color: #999">(come soon)</span> </div>-->
				<!--<div class='weui-cell__ft'></div>-->
			<!--</div>-->
			<div class='weui-cell weui-cell_access' id='mall-cart-pay-wechat'>
				<div class='weui-cell__bd'><i class='i i-weixin'></i> 微信支付 </div>
				<div class='weui-cell__ft'></div>
			</div>
			<!--<div class='weui-cell weui-cell_access' id='mall-cart-pay-alipay'>-->
				<!--<div class='weui-cell__bd'><i class='i i-alipay'></i> 支付宝<span style="color: #999">(come soon)</span> </div>-->
				<!--<div class='weui-cell__ft'></div>-->
			<!--</div>-->
		</div>
	</div>
</div>

<script>
    function getFloatStr(num){
        num += '';
        num = num.replace(/[^0-9|\.]/g, ''); //清除字符串中的非数字非.字符

        if(/^0+/) //清除字符串开头的0
            num = num.replace(/^0+/, '');
        if(!/\./.test(num)) //为整数字符串在末尾添加.00
            num += '.00';
        if(/^\./.test(num)) //字符以.开头时,在开头添加0
            num = '0' + num;
        num += '00';        //在字符串末尾补零
        num = num.match(/\d+\.\d{2}/)[0];
        return num;
    }
	(function (w, u) {
	    var IS = {
	        orderShow: false
		};
		$('#order-info-box').on('click', '#order-detail-btn', function () {
			if (!IS.orderShow) {
                $('.order-detail').show();
                IS.orderShow = true;
			} else {
                $('.order-detail').hide();
                IS.orderShow = false;
			}
        });

		function getLocalStorage() {
		    var datas = {};
		     datas.mallName = localStorage.mall_name;
		    datas.address = localStorage.address;
		    datas.order_id = localStorage.order_id;
		    datas.total_fee = localStorage.total_fee;
		    datas.addressName = localStorage.addressName;
		    return datas
        };

		function setData() {
			var a = getLocalStorage();
			$('#username').text(a.addressName);
			$('#address-info').text(a.address);
			$('#money').text(getFloatStr(a.total_fee / 100));
			$('#order-num').text(a.order_id);
			$('#address-detail').text(a.address);
			$('#shop-name').html(a.mallName);
        }
        setData();
    })(window, undefined)

	$('#mall-cart-pay-wechat').on('click',function () {
        var order_id = localStorage.order_id;
        PAY.order_id = order_id;
        PAY.body = localStorage.mall_name+"等 "+localStorage.amount+"件商品 [重卡汇]";
        $(document).trigger('bc-pay-tenpay');
    })

</script>
